<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="BuilClose"></div>
      <div class="pub-w">
        <!--<div class="rele-titles" @click="BuilClose">新增门店<span>X</span></div>-->
        <div class="rele-titles"><span>新增门店</span><img @click="BuilClose" src="../assets/img/tub.png" alt=""></div>
        <div class="pub-list">
          <div class="pub-li">
            <div class="pub-title">门店名称</div>
            <div class="pub-input"><input type="text" name="" v-model="title" placeholder="请输入门店名称" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">归属区域</div>
            <div class="pub-input">
              <select v-model="pid" placeholder="请选择" style="width:100%;height: 27px;">
                <option
                  v-for="item in area"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!--<div class="pub-li">-->
          <!--<div class="pub-title">门店地址</div>-->
          <!--<div class="pub-input"><input type="" name=""></div>-->
          <!--</div>-->
          <!--<div class="pub-li">-->
          <!--<div class="pub-title">门店电话</div>-->
          <!--<div class="pub-input"><input type="" name=""></div>-->
          <!--</div>-->
          <div class="pub-li">
            <div class="pub-title">排序值</div>
            <div class="pub-input"><input type="" name="" v-model="sort" placeholder="请输入排序号" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">区域类型</div>
            <div class="pub-input">
              <el-radio v-model="radio" label="1">自营店</el-radio>
              <el-radio v-model="radio" label="2">加盟店</el-radio>
              <el-radio v-model="radio" label="3">其他</el-radio>
            </div>
          </div>
          <div class="pub-li">
            <el-button @click="MenDian" style="right: 180px;position: absolute;" type="primary">添加</el-button>
            <el-button @click="BuilClose" type="primary" style="right: 5%;">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  export default {
    props: {
      LDmodal: {
        type: Function,
      },
      Refresh: {
        type: Function,
      },
      BuilClose: {
        type: Function,
      },
      Quyu: {
        type: Array,
      },
    },
    data() {
      return {

        radio: '1',
        pid: '',
        title: '',
        sort: '',
      }
    },
    methods: {
      MenDian() {
        let that = this;
        that.$http.post('/index/department', {
          pid: this.pid,
          area_type: this.radio,
          sort: this.sort,
          title: this.title,
        }).then(res => {
          console.log(res);
          if (res.data.status === 1) {
            that.Refresh();
            that.BuilClose()
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }
        }).catch(err => {
          console.log(err)
        })
      },
    },
    computed: {
      area() {
        return this.Quyu
      },
    },
  }
</script>
<style scoped>
.modal {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .pub-li button {
    width: 80px;
    font-size: 1.1em;
    /*background: #ed7d31;*/
    color: #ffffff;
    border: none;
    float: left;
    border-radius: 5px;

  }

  .pub-li button:nth-child(2) {
    float: right;
    width: 80px;
    position: relative;
    color: #fff;
  }

  .pub-list {
    width: 100%;
    float: left;
    margin-top: 57px;
    text-align: center;
  }

  .pub-input {
    width: 65%;
    float: left;
  }

  .pub-input input {
    width: 100%;
    line-height: 27px;
    height: 27px;
    float: left;
    border: 1px solid #d3d3d3;
    cursor: pointer;
  }
  select{
    cursor: pointer;
  }
  .pub-li {
    margin-top: 10px;
    width: 80%;
    display: inline-block;
  }

  .pub-title {
    width: 30%;
    line-height: 27px;
    text-align: center;
    font-size: 1.1em;
    float: left;
    font-weight:bold;
  }

  .pub-w {
    width: 28%;
    /* left: 40%; */
    height: 300px;
    /* top: 50%; */
    overflow: hidden;
    /* margin-top: -175px; */
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    z-index: 10;
  }

  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img{
    /*position: fixed;*/
    /* flex-star:40px; */
    /*margin-left: 44%;*/
    /* position: relative; */
    cursor: pointer;
    border-radius: 10px;

  }
  img{
    left: 148%;
  }
  .rele-titles {
    box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
  line-height: 50px;
  font-size: 2em;
  color: #000;
  background: #f5f5f7;
  position: absolute;
  z-index: 9;
  border-bottom: 1px solid #d3d3d3;
  }
</style>
